<template>
  <yt-page title="重大危险源报警统计" scroll :rightData="rightData">
    <yt-card title="评估登记占比统计">
      <div ref="chartPie" style="width: 100%; height: 300px"></div>
    </yt-card>
    <yt-card title="重大危险源事故类型统计柱图">
      <div ref="chartLine" style="height: 800px"></div>
    </yt-card>
    <yt-popup pos="right" v-model="search" :mask="true" slot="alert">
      <yt-page class="page" :flex="true" :leftData="[]" title="企业列表">
        <yt-form style="background-color: #fff">
          <yt-radioList class="list" :list="entList" label="EnterpriseName" val="id" v-model="selected" :inline="false"/>
          <yt-btn-group slot="btn" :shadow="false">
            <yt-btn theme="white" @click="search = false">关闭</yt-btn>
            <yt-btn @click="onSearch(selected)">确定</yt-btn>
          </yt-btn-group>
        </yt-form>
      </yt-page>
    </yt-popup>
  </yt-page>
</template>

<script>
import gql from './danger-source-check-topic.gql'
import { commonApi } from '@/common/api/commonApi.js'
import _ from 'lodash'
import echarts from 'echarts/lib/echarts'
import 'echarts/theme/macarons'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'

const COLORS = ['#ff0001', '#66ff00', '#669800', '#003299', '#ffff00', '#69fdff', '#66339a', '#ff9900', '#797878']
const LEVELS = ['一级风险', '二级风险', '三级风险', '四级风险']

export default {
  data () {
    const grid = { name: 'XXX', enterprises: [], total: 0 }
    return {
      search: false,
      selected: [],
      entList: [],
      rightData: [{
        font: 'yt-icon yt-icon-search',
        click: () => {
          this.search = !this.search
        }
      }],
      disasterDic: [],
      grid: [grid, grid, grid, grid, grid],
      currentId: null,
      LEVELS,
      total: ['N/A', 'N/A', 'N/A', 'N/A'],
      chartLineObj: null,
      chartPieObj: null,
      colors: COLORS,
      chartLineOption: {
        grid: {
          left: '20%'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [
          {
            name: '重大危险源/个数',
            nameLocation: 'center',
            nameGap: '30',
            type: 'value'
          }
        ],
        yAxis: [
          {
            name: '事故类型',
            nameLocation: 'end',
            boundaryGap: true,
            type: 'category',
            data: []
          }
        ],
        series: [
          {
            name: '政府',
            type: 'bar',
            data: []
          }
        ]
      },
      chartPieOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'top',
          data: LEVELS
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['40%', '50%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              { value: 335, name: '一级风险' },
              { value: 310, name: '二级风险' },
              { value: 234, name: '三级风险' },
              { value: 234, name: '四级风险' }
            ]
          }
        ]
      }
    }
  },
  activated() {
    this.chartLineObj = echarts.init(this.$refs.chartLine, 'macarons')
    this.chartPieObj = echarts.init(this.$refs.chartPie, 'macarons')
    this.onInit()
  },
  methods: {
    renderTotal(total) {
      let obj = _.zipObject(total.keys, total.values)
      this.grid = this.grid.map(item => {
        let total = item.enterprises.reduce((total, v) => {
          return total + (obj[v.id] || 0)
        }, 0)
        return { ...item, total }
      })
    },
    renderCard1(total) {
      this.chartPieOption.series[0].data = total.values.map((item, index) => {
        return { value: item, name: LEVELS[index] }
      })
      this.chartPieObj.setOption(this.chartPieOption)
    },
    renderCard2(genre) {
      let data = this.disasterDic.map(item => {
      let index = genre.keys.indexOf(item.D_code)
      return {
        name: item.D_text,
        value: index > -1 ? genre.values[index] : 0
      }
    })
    this.chartLineOption.yAxis[0].data = this.disasterDic.map(v => v.D_text)
    this.chartLineOption.series[0].data = data
    this.chartLineObj.setOption(this.chartLineOption)
    },
    getGql(id) {
      let param = { ascending: 'level' }
      return commonApi.gql(gql, {
        'qjson': id ? _.merge(param, { equalTo: ['unit', id] }) : param
      })
    },
    async onSearch(id) {
      this.search = false
      this.currentId = id
      this.disasterDic = await commonApi.dictionary('disaster')
      let { total, level, genre } = await this.getGql(id)
      this.renderTotal(total)
      this.renderCard1(level)
      this.renderCard2(genre)
    },
    async onInit() {
      this.grid = await commonApi.search('sys_grid', { equalTo: { gridLevel: 2 } })
      this.entList = await commonApi.search('ent_enterprise')
      this.onSearch()
    }
  }
}
</script>
